﻿@page "/docs/extensions/datagrid/features/resizing"

<Seo Canonical="/docs/extensions/datagrid/features/resizing" Title="Blazorise DataGrid Resizing" Description="Learn Blazorise by the example. Easily adjust the size of your columns with the Blazorise DataGrid's resizing feature. Drag and drop column edges to resize, or use customized options to fit your needs." />

<DocsPageTitle Path="Extensions/DataGrid/Features/Resizing">
    Blazorise DataGrid: Resizing
</DocsPageTitle>

<DocsPageLead>
    Adjust the width of columns in the DataGrid to better fit the data.
</DocsPageLead>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<DocsPageParagraph>
    With the resizable column feature, users can easily adjust the width of columns in the DataGrid to better fit the data they are viewing. This can be particularly useful when working with large sets of data, where some columns may have longer or shorter data than others. By allowing users to resize columns, they can more easily read and understand the data in the grid.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Resizable">
        The resizable column feature is easy to enable in the Blazorise DataGrid. Just define the <Code>Resizable</Code> and <Code>ResizeMode</Code> parameters.
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridResizableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridResizableExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>